<template>
  <div class="applicants">
    <div class="operation_wrap">
      <div class="show_wrap">
        <div class="show_title">操作</div>
        <div class="show_btn_wrap">
          <div
            class="operation_show_item"
            v-for="(item, i) in list"
            :key="i"
            :class="{ active: current == i }"
            @click="operationClick(item, i)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- <div class="operation_btn_wrap">
        <el-button type="primary">批量审核</el-button>
        <span>下载报名选手</span>
      </div> -->
    </div>

    <div class="header_table_wrap">
      <div class="item">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="cursor: pointer">
            {{ hiddenValue }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="handleHidden(item)"
              v-for="(item, index) in hidden"
              :key="index"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="item searchItem">
        <el-input
          placeholder="选手名称"
          suffix-icon="el-icon-search"
          v-model="searchKey"
          @change="handleSearch"
        >
        </el-input>
      </div>
    </div>
    <div class="table_wrap">
      <el-table
        ref="playerList"
        :data="playerList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="选手" width="300">
          <template slot-scope="scope">
            <div class="player_title_wrap">
              <div class="img_wrap">
                <el-image
                  style="border-radius: 8px; width: 44px; height: 44px"
                  :src="
                    scope.row.coverType === 'IMAGE' && scope.row.coverLink
                      ? scope.row.coverLink
                      : require('../../../../../assets/images/cover.png')
                  "
                  fit="cover"
                ></el-image>
                <div class="eyes_wrap" v-if="scope.row.hidden">
                  <el-image
                    style="width: 19px; height: 16px"
                    :src="require('../../../../../assets/images/eyes.png')"
                    fit="cover"
                  ></el-image>
                </div>
              </div>
              <span class="number">{{ scope.row.number }}号</span>
              <span class="name">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="选手分组"
          align="center"
          v-if="groupList.length"
        >
          <template slot-scope="scope">
            <div>{{ filterGroupId(scope.row.contestantGroupId) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="vc"
          label="票数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pv"
          label="浏览量"
          align="center"
        ></el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <div :style="scope.row.approvalStatus | filterClass">
              {{ scope.row.approvalStatus | filterStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-dropdown trigger="click" placement="bottom">
                <span style="font-size: 14px">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleLook(scope.row)"
                    >查看</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="deletePlayer(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="query.pageSize"
          :current-page="query.pageNum"
          :total="total"
          @current-change="handleChangePage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="报名资料"
      :visible.sync="centerDialogVisible"
      width="550px"
      center
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div class="currentPlayer_detail_box">
        <el-form label-width="80px" label-position="left">
          <!-- <el-form-item label="分组">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="编号">
            <el-input readonly :value="currentPlayer.number"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input readonly :value="currentPlayer.name"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input
              readonly
              :value="currentPlayer.introduction || '无'"
            ></el-input>
          </el-form-item>
          <el-form-item label="审核操作">
            <el-radio-group v-model="radio">
              <el-radio label="WAITTING">待审核</el-radio>
              <el-radio label="PASS">通过</el-radio>
              <el-radio label="REFUSE">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="报名时间">
            <el-input readonly :value="currentPlayer.updatedTime"></el-input>
          </el-form-item>
        </el-form>
        <div class="sure_wrap" @click="handleSure">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list: [
        // { name: "待审核", value: "WAITTING" },
        { name: "通过", value: "PASS" },
        { name: "拒绝", value: "REFUSE" },
        { name: "删除", value: "DELETE" },
      ],
      hidden: [
        {
          name: "全部",
          approvalStatus: "",
        },
        {
          name: "待审核",
          approvalStatus: "WAITTING",
        },
        {
          name: "已通过",
          approvalStatus: "PASS",
        },
        {
          name: "已拒绝",
          approvalStatus: "REFUSE",
        },
      ],
      hiddenValue: "全部",
      searchKey: "",
      playerList: [],
      total: 0,
      detetePlayerList: [],
      query: {
        approvalStatus: "",
        name: "",
        pageNum: 1,
        pageSize: 10,
        voteId: this.$route.query.id,
      },
      groupList: [],
      centerDialogVisible: false,
      options: [],
      currentPlayer: {},
      radio: "WAITTING",
    };
  },
  filters: {
    filterStatus(val) {
      let str = "";
      switch (val) {
        case "PASS":
          str = "已通过";
          break;
        case "REFUSE":
          str = "已拒绝";
          break;
        case "WAITTING":
          str = "待审核";
          break;
        default: {
          str = "";
          break;
        }
      }
      return str;
    },
    filterClass(val) {
      let str = "";
      switch (val) {
        case "PASS":
          str = "#999";
          break;
        case "REFUSE":
          str = "#FB4723";
          break;
        case "WAITTING":
          str = "#409EFF";
          break;
        default: {
          str = "";
          break;
        }
      }
      return {
        color: str,
      };
    },
  },
  created() {
    this.getGroup();
    this.getApplicantList();
  },
  methods: {
    filterGroupId(id) {
      let item = this.groupList.find((item) => item.id === id);
      return item ? item.name : "无";
    },
    getGroup() {
      this.$api("player.getGroup", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.groupList = res;
        res.forEach((item) => {
          this.options.push({
            value: item.id,
            label: item.name,
          });
        });
      });
    },
    //获取报名选手列表
    getApplicantList() {
      this.$api("player.getApplicantList", this.query).then((res) => {
        this.playerList = res.data;
        this.total = res.count;
      });
    },
    operationClick(item, i) {
      if (this.detetePlayerList.length) {
        this.current = i;
        const arr = [];
        this.detetePlayerList.forEach((item) => {
          arr.push(item.id);
        });
        if (item.value === "DELETE") {
          this.$confirm("确认删除已选择的选手吗？", "删除选手", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$api("player.deletePlayers", {
                ids: arr,
              }).then((res) => {
                console.log(res);
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1000,
                });
                this.getApplicantList();
              });
            })
            .catch(() => {});
        } else {
          //修改
          this.upDatePlayers(arr, item.value);
        }
      } else {
        this.$message.error({
          type: "error",
          message: "请先选择要操作的数据",
          duration: 1000,
        });
      }
    },
    handleHidden(item) {
      console.log(item);
      this.query.approvalStatus = item.approvalStatus;
      this.hiddenValue = item.name;
      this.query.pageNum = 1;
      this.getApplicantList();
    },
    //查看选手
    handleLook(item) {
      console.log(item);
      this.radio=item.approvalStatus
      this.currentPlayer = item;
      this.centerDialogVisible = true;
    },
    handleChangePage(val) {
      console.log(val);
      this.query.pageNum = val;
    },
    handleSelect(val) {
      console.log(val);
      this.detetePlayerList = val;
    },
    //搜索
    handleSearch() {
      this.query.name = this.searchKey;
      this.query.pageNum = 1;
      this.getApplicantList();
    },
    handleSure() {
      this.upDatePlayers([this.currentPlayer.id], this.radio);
    },
    upDatePlayers(arr, status) {
      this.$api("player.upDatePlayers", {
        ids: arr,
        propery: "APPROVAL_STATUS",
        value: status,
      }).then((res) => {
        console.log(res);
        this.centerDialogVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1000,
        });
        this.getApplicantList();
      });
    },
    deletePlayer(item) {
      this.$confirm("确认删除该选手吗？", "删除选手", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api("player.deletePlayers", {
            ids: [item.id],
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
            });
            this.getApplicantList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.applicants {
  width: 900px;
  min-height: 550px;
  .operation_wrap {
    .show_wrap {
      display: flex;
      align-items: center;
      .show_title {
        font-size: 15px;
        font-weight: bold;
      }
      .show_btn_wrap {
        margin-left: 30px;
        border-radius: 30px;
        background-color: #dbdbdb;
        // width: 268px;
        height: 30px;
        display: flex;
        color: #fff;
        font-weight: 600;
        .operation_show_item {
           width: 80px;
          font-size: 15px;
          flex: 1;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 30px;
          cursor: pointer;
        }
        .active {
          background-color: $themeColor;
        }
      }
    }
    .operation_btn_wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 60px;
      .el-button {
        margin-right: 15px;
        width: 160px;
        height: 30px;
        line-height: 0.5;
      }
      span {
        cursor: pointer;
        margin-left: 20px;
        line-height: 2;
        font-size: 14px;
        color: $themeColor;
        font-weight: 600;
      }
    }
  }
  .header_table_wrap {
    margin-top: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(235, 234, 234);
    .item {
      margin-right: 60px;
    }
    .searchItem {
      ::v-deep.el-input {
        ::-webkit-input-placeholder {
          color: rgb(163, 162, 162);
        }
        :-moz-placeholder {
          /* Firefox 18- */
          color: rgb(163, 162, 162);
        }
        ::-moz-placeholder {
          /* Firefox 19+ */
          color: rgb(163, 162, 162);
        }
        :-ms-input-placeholder {
          color: rgb(163, 162, 162);
        }
        .el-input__inner {
          padding: 0 20px;
          text-align: left;
          border: 1px solid #ccc;
          width: 200px;
        }
      }
    }
  }
  .table_wrap {
    padding: 5px 0 50px;
    .pagination_wrap {
      margin-top: 20px;
    }
    .player_title_wrap {
      display: flex;
      align-items: center;

      .img_wrap {
        position: relative;
        width: 44px;
        height: 44px;
        .eyes_wrap {
          position: absolute;
          left: 0;
          width: 100%;
          top: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .number {
        color: #999;
        margin-left: 10px;
      }
      .name {
        margin-left: 8px;
      }
    }
  }
  .addPlayer_wrap {
    position: relative;
    height: 600px;
    overflow-y: auto;
    .player_btn_wrap {
    }
    .cover_wrap {
      width: 250px;
      position: absolute;
      right: 40px;
      top: 0;
      z-index: 99;
      .cover_img {
        margin-top: 20px;
        width: 150px;
        height: 150px;
      }
    }
  }
  .currentPlayer_detail_box {
    ::v-deep.el-input {
      input {
        border: 0;
      }
    }
    .sure_wrap {
      background-color: $themeColor;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 0 auto;
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>